JavaScripti turvalisuse parimad praktikad: sisendi valideerimine ja XSS-i ennetamine

Tänapäeva omavahel ühendatud digitaalses maastikus on veebirakenduste turvalisus esmatähtis. JavaScript, mis on kaasaegse veebiarenduse nurgakivi, nõuab hoolikat tähelepanu turvalisuse parimatele tavadele. See juhend süveneb kahte olulisse JavaScripti turvalisuse aspekti: sisendi valideerimine ja saidiülese skriptimise (XSS) ennetamine. Uurime haavatavusi, leevendustehnikaid ja praktilisi näiteid, et aidata teil luua vastupidavaid ja turvalisi veebirakendusi ülemaailmsele publikule.

JavaScripti turvalisuse olulisuse mõistmine

JavaScript, mis töötab peamiselt kliendi poolel, mängib olulist rolli kasutajate interaktsioonis ja andmetöötluses. Kuid selle kliendipoolne olemus teeb sellest ka potentsiaalse sihtmärgi pahatahtlikele rünnakutele. Üksainus haavatavus teie JavaScripti koodis võib paljastada teie kasutajad ja rakenduse erinevatele ohtudele, sealhulgas andmevargusele, seansi kaaperdamisele ja rüüstamisele.

Kujutage ette stsenaariumi, kus ülemaailmne e-kaubanduse platvorm ei valideeri korralikult kasutaja sisendit. Pahatahtlik osaleja võiks süstida JavaScripti koodi tooteülevaatesse, mis teistele kasutajatele kuvatuna varastab nende seansiküpsised. See võimaldaks ründajal esineda seaduslike kasutajatena ja potentsiaalselt pääseda ligi tundlikule finantsteabele. Sellised rikkumised võivad kaasa tuua tõsise mainekahju, rahalisi kaotusi ja õiguslikke tagajärgi.

Sisendi valideerimine: esimene kaitseliin

Sisendi valideerimine on protsess, mille käigus kontrollitakse, kas kasutajate sisestatud andmed vastavad oodatud vormingutele ja väärtustele. See on põhiline turvapraktika, mis aitab ennetada erinevaid rünnakuid, sealhulgas XSS-i, SQL-i süstimist (kui suheldakse serveripoolse andmebaasiga API-de kaudu) ja käskude süstimist.

Miks sisendi valideerimine on oluline

• Andmete terviklikkus: Tagab, et teie rakenduses salvestatud ja töödeldud andmed on täpsed ja usaldusväärsed.
• Turvalisus: Takistab pahatahtliku koodi süstimist teie rakendusse.
• Rakenduse stabiilsus: Vähendab ootamatu sisendi põhjustatud vigade ja krahhide tõenäosust.
• Kasutajakogemus: Annab kasutajatele kasulikku tagasisidet, kui nad sisestavad valeandmeid.

Kus sisendit valideerida

On ülioluline valideerida sisendit nii kliendi poolel (JavaScript) kui ka serveri poolel. Kliendipoolne valideerimine annab kasutajatele kohest tagasisidet, parandades kasutajakogemust. Siiski ei tohiks seda kunagi pidada ainsaks kaitseliiniks, kuna pahatahtlikud kasutajad saavad sellest kergesti mööda hiilida. Serveripoolne valideerimine on hädavajalik teie rakenduse turvalisuse ja terviklikkuse tagamiseks, kuna see ei ole kasutajatele otse juurdepääsetav.

Sisendi valideerimise tüübid

Sõltuvalt valideeritavatest konkreetsetest andmetest võib kasutada erinevat tüüpi sisendi valideerimist:

• Tüübi valideerimine: Kontrollib, kas sisend on oodatud andmetüüpi (nt string, number, boolean).
• Vormingu valideerimine: Kontrollib, kas sisend vastab kindlale vormingule (nt e-posti aadress, telefoninumber, kuupäev).
• Vahemiku valideerimine: Tagab, et sisend jääb vastuvõetavasse väärtuste vahemikku (nt vanus, kogus).
• Pikkuse valideerimine: Piirab sisendi pikkust, et vältida puhvri ületäitumist ja muid probleeme.
• Valge nimekirja valideerimine: Lubab sisendis ainult konkreetseid märke või mustreid. See on üldiselt turvalisem kui musta nimekirja valideerimine.
• Puhastamine: Muudab sisendit, et eemaldada või kodeerida potentsiaalselt kahjulikke märke.

Praktilised näited sisendi valideerimisest JavaScriptis

Näide 1: E-posti valideerimine

E-posti aadresside valideerimine on tavaline nõue. Siin on näide regulaaravaldise abil:

            function isValidEmail(email) {
  const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  return emailRegex.test(email);
}

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
  if (!isValidEmail(this.value)) {
    alert('Palun sisestage kehtiv e-posti aadress.');
    this.value = ''; // Tühjenda vigane sisend
  }
});
            

              
                Copy
              
            
          

See koodilõik kasutab regulaaravaldist, et kontrollida, kas e-posti aadress on kehtivas vormingus. Kui ei ole, kuvatakse kasutajale hoiatusteade.

Näide 2: Telefoninumbri valideerimine

Telefoninumbri valideerimine võib olla keeruline erinevate rahvusvaheliste vormingute tõttu. Siin on lihtsustatud näide, mis kontrollib kindlat vormingut (nt +[riigikood][suunakood][number]):

            function isValidPhoneNumber(phoneNumber) {
  const phoneRegex = /^\+\d{1,3}\d{3}\d{7,8}$/; // Näide: +15551234567
  return phoneRegex.test(phoneNumber);
}

const phoneInput = document.getElementById('phone');
phoneInput.addEventListener('blur', function() {
  if (!isValidPhoneNumber(this.value)) {
    alert('Palun sisestage kehtiv telefoninumber (nt +15551234567).');
    this.value = ''; // Tühjenda vigane sisend
  }
});
            

              
                Copy
              
            
          

Tugevama telefoninumbri valideerimiseks kaaluge teegi nagu libphonenumber-js kasutamist, mis toetab rahvusvahelisi telefoninumbri vorminguid.

Näide 3: Valge nimekirja valideerimine tekstisisendi jaoks

Kui teil on vaja piirata tekstisisendit kindla märgistikuga (nt tähtnumbrilised märgid), saate kasutada valge nimekirja valideerimist:

            function isValidTextInput(text) {
  const allowedChars = /^[a-zA-Z0-9\s]+$/; // Luba tähtnumbrilisi märke ja tühikuid
  return allowedChars.test(text);
}

const textInput = document.getElementById('text');
textInput.addEventListener('input', function() {
  if (!isValidTextInput(this.value)) {
    alert('Palun sisestage ainult tähtnumbrilisi märke ja tühikuid.');
    this.value = this.value.replace(/[^a-zA-Z0-9\s]/g, ''); // Eemalda vigased märgid
  }
});
            

              
                Copy
              
            
          

See koodilõik eemaldab sisestusväljalt kõik märgid, mis ei ole tähtnumbrilised ega tühikud.

XSS-i ennetamine: kaitse koodi süstimise vastu

Saidiülene skriptimine (XSS) on turvanõrkuse tüüp, mis võimaldab ründajatel süstida pahatahtlikku koodi (tavaliselt JavaScripti) veebilehtedele, mida teised kasutajad vaatavad. Kui kasutaja külastab kompromiteeritud lehte, käivitub süstitud kood tema brauseris, varastades potentsiaalselt tundlikku teavet, suunates teda pahatahtlikele veebisaitidele või rüüstades lehte.

XSS-i rünnakute tüübid

• Salvestatud XSS (püsiv XSS): Pahatahtlik kood salvestatakse serverisse (nt andmebaasi, foorumipostitusse või kommentaaride jaotisesse) ja edastatakse teistele kasutajatele, kui nad külastavad mõjutatud lehte. See on kõige ohtlikum XSS-i rünnaku tüüp.
• Peegeldatud XSS (mittpüsiv XSS): Pahatahtlik kood süstitakse päringusse (nt URL-i parameetri või vormi esitamise kaudu) ja peegeldatakse kasutajale tagasi vastuses. Seda tüüpi rünnak nõuab, et kasutaja klõpsaks pahatahtlikul lingil või esitaks pahatahtliku vormi.
• DOM-põhine XSS: Haavatavus eksisteerib kliendipoolses JavaScripti koodis endas, kus kood kasutab andmeid ebausaldusväärsest allikast (nt URL-i parameetrid, küpsised) DOM-i dünaamiliseks värskendamiseks ilma korraliku puhastamiseta.

XSS-i ennetamise tehnikad

XSS-i rünnakute ennetamine nõuab mitmekihilist lähenemist, mis hõlmab sisendi valideerimist, väljundi kodeerimist/päästmist ja sisuturbe poliitikat (CSP).

1. Väljundi kodeerimine/päästmine

Väljundi kodeerimine/päästmine on potentsiaalselt kahjulike märkide teisendamine ohutusse vormingusse enne nende kuvamist lehel. See takistab brauseril märkide tõlgendamist koodina.

• HTML-kodeering: Kasutatakse andmete kuvamisel HTML-elementide sees. Kodeerige märgid nagu <, >, &, " ja '.
• JavaScripti kodeering: Kasutatakse andmete kuvamisel JavaScripti koodis. Kodeerige märgid nagu ', ", \ ja reavahetused.
• URL-i kodeering: Kasutatakse andmete kuvamisel URL-ides. Kodeerige märgid nagu tühikud, &, ? ja /.
• CSS-i kodeering: Kasutatakse andmete kuvamisel CSS-koodis. Kodeerige märgid nagu \, " ja reavahetused.

Kaasaegsed JavaScripti raamistikud nagu React, Angular ja Vue.js pakuvad sageli sisseehitatud mehhanisme väljundi kodeerimiseks, mis aitavad ennetada XSS-i rünnakuid. Siiski on oluline olla teadlik potentsiaalsetest haavatavustest ja kasutada neid mehhanisme õigesti.

Näide: HTML-kodeering JavaScriptis

            function escapeHTML(str) {
  let div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

const userInput = '<script>alert(\'XSS attack!\');</script>';
const escapedInput = escapeHTML(userInput);

document.getElementById('output').innerHTML = escapedInput;
            

              
                Copy
              
            
          

See koodilõik loob ajutise div elemendi ja lisab kasutaja sisendi tekstisisuna. div elemendi innerHTML omadus tagastab seejärel sisendi HTML-kodeeritud versiooni.

2. Sisuturbe poliitika (CSP)

Sisuturbe poliitika (CSP) on turvamehhanism, mis võimaldab teil kontrollida ressursse, mida brauseril on lubatud laadida. Määratledes CSP, saate takistada brauseril käivitamast tekstisisest JavaScripti, laadimast skripte ebausaldusväärsetest allikatest ja sooritamast muid potentsiaalselt kahjulikke tegevusi.

CSP rakendatakse, seadistades teie serveris HTTP päise Content-Security-Policy. Päis sisaldab direktiivide loendit, mis määravad erinevat tüüpi ressursside lubatud allikad.

Näide: CSP päis

            Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://example.com; img-src 'self' data:;
            

              
                Copy
              
            
          

See CSP päis lubab brauseril laadida ressursse samast päritolust ('self'), skripte saidilt https://example.com, stiile saidilt https://example.com ja pilte samast päritolust ning andme-URL-idest.

CSP efektiivne kasutamine nõuab hoolikat planeerimist ja testimist, kuna see võib valesti konfigureerimisel teie rakenduse katki teha. Siiski on see võimas tööriist XSS-i rünnakute ja muude turvanõrkuste leevendamiseks.

3. Puhastusteegid

Puhastusteegid on tööriistad, mis aitavad teil eemaldada või kodeerida potentsiaalselt kahjulikke märke kasutaja sisendist. Need teegid pakuvad sageli keerukamaid puhastustehnikaid kui lihtne kodeerimine, näiteks eemaldades HTML-sildid või atribuudid, mis on teadaolevalt XSS-i rünnakute suhtes haavatavad.

Üks populaarne JavaScripti puhastusteek on DOMPurify. DOMPurify on kiire, DOM-põhine XSS-i puhastaja, mida saab kasutada HTML- ja SVG-sisu puhastamiseks.

Näide: DOMPurify kasutamine

            import DOMPurify from 'dompurify';

const userInput = '<img src="x" onerror="alert(\'XSS attack!\')">';
const sanitizedInput = DOMPurify.sanitize(userInput);

document.getElementById('output').innerHTML = sanitizedInput;
            

              
                Copy
              
            
          

See koodilõik kasutab DOMPurify'd kasutaja sisendi puhastamiseks, eemaldades img sildilt atribuudi onerror, mis ennetab XSS-i rünnaku.

Parimad praktikad XSS-i ennetamiseks

• Valideerige ja puhastage alati kasutaja sisendit nii kliendi kui ka serveri poolel.
• Kasutage väljundi kodeerimist/päästmist, et takistada brauseril kasutaja sisendi tõlgendamist koodina.
• Rakendage sisuturbe poliitika (CSP), et kontrollida ressursse, mida brauseril on lubatud laadida.
• Kasutage puhastusteeki nagu DOMPurify, et eemaldada või kodeerida potentsiaalselt kahjulikke märke kasutaja sisendist.
• Hoidke oma JavaScripti teegid ja raamistikud ajakohasena, et tagada uusimate turvapaikade olemasolu.
• Harige oma arendajaid XSS-i haavatavuste ja ennetamise parimate tavade osas.
• Auditeerige regulaarselt oma koodi XSS-i haavatavuste suhtes.

Kokkuvõte

JavaScripti turvalisus on veebirakenduste arendamise kriitiline aspekt. Sisendi valideerimise ja XSS-i ennetamise tehnikate rakendamisega saate oluliselt vähendada turvanõrkuste riski ning kaitsta oma kasutajaid ja rakendust pahatahtlike rünnakute eest. Pidage meeles, et peate kasutama mitmekihilist lähenemist, mis hõlmab sisendi valideerimist, väljundi kodeerimist/päästmist, sisuturbe poliitikat ja puhastusteekide kasutamist. Püsides kursis viimaste turvaohtude ja parimate tavadega, saate luua vastupidavaid ja turvalisi veebirakendusi, mis peavad vastu küberohtude pidevalt arenevale maastikule.

Lisamaterjalid

• OWASP (Avatud Veebirakenduste Turvalisuse Projekt): https://owasp.org/
• DOMPurify: https://github.com/cure53/DOMPurify
• Sisuturbe poliitika viited: https://content-security-policy.com/